<template>
  <div id="map" ref="map">
    <layer-Switch :map="map" />
    <measureControl :map="map" />
  </div>

</template>

<script>
import Map from 'ol/Map.js'
// import OSM from 'ol/source/OSM.js'
import TileLayer from 'ol/layer/Tile.js'
import View from 'ol/View.js'
import { defaults as defaultControls, FullScreen, ScaleLine, ZoomSlider, Rotate, OverviewMap, ZoomToExtent } from 'ol/control.js'
import XYZ from 'ol/source/XYZ.js'
import { fromLonLat } from 'ol/proj.js'
import layerSwitch from './layerSwitch.vue'
import measureControl from './measureControl.vue'
export default {
  name: 'indexMap',
  components: {
    layerSwitch,
    measureControl
  },
  data () {
    return {
      map: null
    }
  },
  mounted () {
    try {
      this.initMap()
    } catch (error) {
      console.error('初始化地图时出错:', error)
    }
  },
  methods: {
    initMap () {
      this.map = new Map({
        target: this.$refs.map, // 绑定DOM元素
        layers: [
          // 加载OSM地图
          // new TileLayer({
          //   title: 'OSM',
          //   source: new OSM()
          // }),
          // 加载天地图矢量图层
          new TileLayer({
            source: new XYZ({
              url: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=284c8cabdaefbb6e0c07906bd771bb7a',
              layer: 'vec',
              projection: 'EPSG:3857',
              crossOrigin: 'anonymous'
              // 自定义瓦片网格
            })
          }),
          // 居民地及设施图层
          new TileLayer({
            source: new XYZ({
              url: 'http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=284c8cabdaefbb6e0c07906bd771bb7a',
              layer: 'img',
              projection: 'EPSG:3857',
              crossOrigin: 'anonymous'
              // 自定义瓦片网格
            })
          }),
          // 影像注记图层
          new TileLayer({
            source: new XYZ({
              url: 'http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=284c8cabdaefbb6e0c07906bd771bb7a',
              layer: 'cva',
              projection: 'EPSG:3857',
              crossOrigin: 'anonymous',
              className: 'cva-layer'
              // 自定义瓦片网格
            })
          }),
          // 交通图层
          new TileLayer({
            source: new XYZ({
              url: 'http://t0.tianditu.gov.cn/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=284c8cabdaefbb6e0c07906bd771bb7a',
              layer: 'cta',
              projection: 'EPSG:3857',
              crossOrigin: 'anonymous'
              // 自定义瓦片网格
            })
          })
        ],
        view: new View({
          center: fromLonLat([108.9404, 34.2742]), // 西安的经纬度
          zoom: 12 // 调整缩放级别以更好地显示西安地区
        }),
        controls: defaultControls().extend([
          new FullScreen({
            className: 'ol-full-screen',
            label: '\u2922', // 全屏按钮文字
            labelActive: '\u00D7' // 退出全屏按钮文字
          }),
          new ScaleLine(), // 比例尺控件
          new ZoomSlider(), // 放大缩小滑块控件
          new Rotate(), // 罗盘控件
          new OverviewMap({
            className: 'ol-overviewmap',
            layers: [
              new TileLayer({
                source: new XYZ({
                  url: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=284c8cabdaefbb6e0c07906bd771bb7a',
                  layer: 'vec',
                  projection: 'EPSG:3857',
                  crossOrigin: 'anonymous'
                  // 自定义瓦片网格
                })
              })
            ],
            collapseLabel: '\u00BB', // 缩小按钮文字
            label: '\u00AB' // 放大按钮文字
          }),
          new ZoomToExtent({
            extent: [33000000.0, 33000000.0, 35000000.0, 55300000.0] // 自定义缩放范围 范围：上、右、下、左
          })
        ]),
        // 加载完地图后触发
        load () {
          console.log('地图加载完毕')
        },
        // 点击地图时触发
        click (e) {
          console.log('点击地图:', e)
        },
        // 拖动地图时触发
        moveend (e) {
          console.log('拖动地图:', e)
        },
        // 缩放地图时触发
        zoomend (e) {
          console.log('缩放地图:', e)
        }
      })
    }
  }
}
</script>

<style>
/* 根据需要添加样式 */
#map {
  display: flex;
  height: calc(100vh - 60px);
  margin: 0;
  padding: 0;
}

.cva-layer {
  z-index: 999;
}
</style>
